import React, { useState, useMemo, useCallback } from 'react';
// import { url } from "env";
import Cookies from 'js-cookie'

import {  Redirect } from "react-router-dom";
import { connect } from "react-redux";
import { List, InputItem, Button, Toast } from 'antd-mobile';
import { postLogin, } from '@/network/protocol';
import './style.less';

const Login = (props) => {

// ma_13000000000   8233


  let state = props.location.state || '/'; 
  let search = props.location.search || ''; 
  const [name, setName] = useState('') 
  const [password, setPassword] = useState('')
  const [nameerr, setNameerr] = useState(false)
  const [pwderr, setpwderr] = useState(false)


  const param = useMemo(() => {
    return {
      userId: name, userPass: password
    }
  }, [name, password])

  const setname = useCallback((key) => {
    setName(key.trim())
  }, [])

  const setpwd = useCallback((key) => {
    setPassword(key.trim())
  }, [])

  const check = useCallback(() => {
    setNameerr(name ? false : true)
    setpwderr(password ? false : true)
    return name && password
  }, [name, password])


  const login = useCallback(async () => {
    if (!check()) return
    try {
      let response = await postLogin(param);
      if (response.errorCode === 0) {
        let { token, role } = response.source;
        Cookies.set('token', token, { expires: 700 });
        Cookies.set('role', role, { expires: 700 });
        Cookies.set('userId', name, { expires: 700 });
        Cookies.set('pwd', password, { expires: 700 });
        Toast.success('登录成功', 1)
        props.toLogin({ token, role, userId: param.userId,pwd:password })
      } else {
        Toast.fail(response.message || '登录失败',1)
      }
    } catch (error) {
      Toast.fail('登录失败',1)
    }
  

  }, [check, name, param, password, props])

  if (props.user.token) {
    return <Redirect to={{ pathname: state, search: search }} />
    // // 如果登录到对应的页面
    // if (props.user.role == '3') {
    //   return <Redirect to={{ pathname: '/ningJu' }} />
    // } else {
    //   return <Redirect to={{ pathname: state }} />
    // }
  }

  return (
    <div className="loginBox global-content">
      <img className="login-logo" src={require('../../assests/img/logo.png')} alt="" />
      <p className="login-text"></p>
      <List>
        <div className="InputItem-box">
          <InputItem
            clear
            placeholder="账号"
            onChange={setname}
            value={name}
          />
          {nameerr && <span className="errtip">请输入账号</span>}
        </div>
        <div className="InputItem-box">
          <InputItem
            clear
            placeholder="密码"
            onChange={setpwd}
            value={password}
          />
          {pwderr && <span className="errtip">请输入密码</span>}
        </div>
        {/* 
        <Link className="forget" to="/modifyPwd">
          <p >修改密码</p>
        </Link> */}

      </List>
      <Button type="primary" onClick={login}>
        登录
        </Button>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    user: state.user
  }
}

const mapDispatchToProps = dispatch => {
  return {
    toLogin: (data) => dispatch({ type: 'LOGIN', data })
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);